body {
	background-color: black;
	width: 100%;
	height: 100%;
	--default-font-color: white;
	overflow: hidden;
}


.display-area-1 {
	position: absolute;
	top: 20px;
	left: 20px;
	text-align: center;
	width: 100%;
	height: 100%;
}

.display-area-1 h1{
	color: var(--default-font-color);
	font-weight: 400;
	font-size: 50px;
	font-family: "microsoft yahei", serif;
	margin: 0px;
	margin-top: 20px;
}

.display-area-2 {
	position: absolute;
	width: 400px;
	height: 400px;
	border-radius: 50% 50%;
	background-image: radial-gradient(circle, red, yellow, green);
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
}


.interactive_1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0%;
	height: 10px;
	border: 2px solid rgba(255, 230, 0, 0.65);
	background-color: rgb(255, 170, 0);
	transition: width 0.5s;
}

.interactive_2 {
	position: absolute;
	top: 15px;
	left: 0px;
	width: 0%;
	height: 10px;
	border: 2px solid rgba(8, 255, 0, 0.67);
	background-color: rgb(106, 255, 0);
	transition: width 0.5s;
}